<template>
  <div class="page">
    <div class="header">
      <div class="header-title">Personal introduction</div>
      <div class="close-box" @click="goBack">
        <img
          class="close-img"
          src="../../assets/images//home/close.png"
          alt=""
        />
      </div>
    </div>
    <v-touch
      @swipeleft="onSwipeLeft()"
      @swiperight="onSwipeRight()"
      :swipe-options="{ direction: 'horizontal' }"
      style="touch-action: pan-y !important"
    >
      <div class="content">
        <div class="headerImgBox">
          <img class="my-swipe-img" :src="vipDetail.imagesOne" alt="" />
          <div class="header-img-text">{{ vipDetail.advertisementName }}</div>
        </div>

        <div class="box2">
          <div class="text-header">{{ vipDetail.advertisementTitleOne }}</div>
          <div class="text-p2" v-html="vipDetail.advertisementRemarkOne"></div>
        </div>

        <div class="layout">
          <div class="layout-1" v-if="vipDetail.imagesTwo">
            <img :src="vipDetail.imagesTwo" alt="" />
          </div>
          <div class="layout-1" v-if="vipDetail.imagesThree">
            <img :src="vipDetail.imagesThree" alt="" />
          </div>
          <div class="layout-2">
            <div class="layout-lf" v-if="vipDetail.imagesFour">
              <img :src="vipDetail.imagesFour" alt="" />
            </div>
            <div class="layout-rg" v-if="vipDetail.imagesFive">
              <img :src="vipDetail.imagesFive" alt="" />
            </div>
          </div>
          <div class="layout-1" v-if="vipDetail.imagesSix">
            <img :src="vipDetail.imagesSix" alt="" />
          </div>
          <div class="layout-3" v-if="vipDetail.imagesSeven">
            <img :src="vipDetail.imagesSeven" alt="" />
          </div>
        </div>
        <div class="box2">
          <div class="text-header">{{ vipDetail.advertisementTitleTwo }}</div>
          <div class="text-p2" v-html="vipDetail.advertisementRemarkTwo"></div>
        </div>
        <div class="layout-1 pad-20" v-if="vipDetail.imagesEight">
          <img :src="vipDetail.imagesEight" alt="" />
        </div>
        <div class="layout-1 pad-20" v-if="vipDetail.imagesNine">
          <img :src="vipDetail.imagesNine" alt="" />
        </div>
        <div class="box2">
          <div class="text-header">{{ vipDetail.advertisementTitleThree }}</div>
          <div
            class="text-p2"
            v-html="vipDetail.advertisementRemarkThree"
          ></div>
        </div>
        <div class="detail-info-content">
          <div class="info-content-item">
            <div class="info-content-item-lf">Name</div>
            <div class="info-content-item-rg">{{ vipDetail.nickName }}</div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Race</div>
            <div class="info-content-item-rg">{{ vipDetail.race }}</div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Age</div>
            <div class="info-content-item-rg">{{ vipDetail.age }}</div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Height</div>
            <div class="info-content-item-rg">{{ vipDetail.height }}cm</div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Email</div>
            <div class="info-content-item-rg">
              {{ vipDetail.email }}
              <div class="copy-btn" @click="copyEmail">copy</div>
            </div>
          </div>
          <div class="info-content-item">
            <div class="info-content-item-lf">Telephone</div>
            <div class="info-content-item-rg">
              {{ vipDetail.phoneNumber }}
              <div class="copy-btn" @click="copyPhoneNumber">copy</div>
            </div>
          </div>
        </div>
      </div>
    </v-touch>
  </div>
</template>

<script>
import { apiVipDetail, apiVipList } from '../../request/api'
export default {
  name: 'vipDetails',
  components: {},
  data() {
    return {
      advertisementId: null,
      vipDetail: {},
      email: '',
      phoneNumber: '',
      city: '',
      pageNum: '',
      pageSize: '',
      langeuage: '',
      adVipList: [],
      advertisementIds: [],
      currentIndex: null,
    }
  },
  created() {
    this.advertisementId = Number(this.$route.query.id)
    this.getVipDetail()
    apiVipList({
      city: this.city,
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      langeuage: this.langeuage,
    }).then((res) => {
      if (res.code == 200) {
        this.adVipList = res.rows
        this.adVipList.forEach((ad) => {
          this.advertisementIds.push(ad.advertisementId)
        })
        // this.advertisementId = this.advertisementIds[0];
      }
    })
  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    copyEmail() {
      this.$copyText(this.email).then(
        (e) => {
          this.$toast.success('复制成功')
        },
        (err) => {
          this.$toast.fail('复制失败')
        }
      )
    },
    copyPhoneNumber() {
      this.$copyText(this.phoneNumber).then(
        (e) => {
          this.$toast.success('复制成功')
        },
        (err) => {
          this.$toast.fail('复制失败')
        }
      )
    },
    getVipDetail() {
      apiVipDetail(this.advertisementId).then((res) => {
        if (res.code == 200) {
          console.log(res)
          this.vipDetail = res.data
          this.email = res.data.email
          this.phoneNumber = res.data.phoneNumber
        }
      })
    },
    onSwipeLeft() {
      console.log('左滑')
      const index = this.advertisementIds.indexOf(this.advertisementId)
      console.log(index)
      if (index < this.advertisementIds.length - 1) {
        this.currentIndex = index + 1
        this.advertisementId = this.advertisementIds[this.currentIndex]
        this.getVipDetail()
      } else {
        console.log('没有更多的广告了')
      }
    },
    onSwipeRight() {
      console.log('右滑')
      const index = this.advertisementIds.indexOf(this.advertisementId)
      console.log(index)
      if (index > 0) {
        this.currentIndex = index - 1
        this.advertisementId = this.advertisementIds[this.currentIndex]
        this.getVipDetail()
      } else {
        console.log('没有更多的广告了')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 100px;
  background: #273458;
  position: relative;
  .header-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
  }
  .close-box {
    position: absolute;
    height: 100px;
    right: 30px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .close-img {
    height: 40px;
    width: 40px;
  }
}
.content {
  .headerImgBox {
    // padding: 0 24px;
    position: relative;
  }
  .header-img {
    width: 100%;
    height: auto;
  }
  .header-img-text {
    position: absolute;
    left: 63px;
    bottom: 60px;
    font-size: 90px;
    font-weight: 500;
    color: #ffffff;
  }
  .box1 {
    padding: 40px 60px;
  }
  .text-p1 {
    font-size: 28px;
    font-weight: 400;
    color: #000000;
  }
  .box2 {
    background: #f8f8f8;
    padding: 60px;
  }
  .text-header {
    font-size: 40px;
    font-weight: 500;
    color: #0e0e0e;
    margin-bottom: 36px;
    margin-top: 16px;
  }
  .text-p2 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 36px;
    color: #000000;
  }
  .box3 {
    padding: 40px 60px;
  }
  .box4 {
    padding: 40px 20px;
  }
}
.detail-info-content {
  padding: 0 24px;
  margin: 0 0 40px;
  .info-content-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .info-content-item-lf {
    width: 200px;
    height: 70px;
    background: #273458;
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
  .info-content-item-rg {
    flex: 1;
    height: 70px;
    background: #f3f3f3;
    font-size: 24px;
    font-weight: 500;
    color: #232f3e;
    padding-left: 30px;
    display: flex;
    align-items: center;
    position: relative;
  }
  .copy-btn {
    position: absolute;
    right: 0;
    height: 70px;
    width: 104px;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    background: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.layout-1 {
  margin-bottom: 20px;
}
.layout-1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pad-20 {
  padding: 0 24px;
}
.layout {
  padding: 0 24px;
  .layout-1 {
    margin-bottom: 20px;
  }
  .layout-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .layout-2 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    height: 520px;
  }
  .layout-lf {
    width: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .layout-rg {
    width: 50%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .layout-lf img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .layout-rg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .layout-3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.my-swipe-img {
  width: 100%;
  height: auto;
}
</style>
